<template>
  <div  style="margin-top: 11px" v-if="windowWidth > 992">
    <!--      <div class="swiper-container swiper-container-initialized swiper-container-horizontal" id="swiper-banner">
            <div class="swiper-wrapper" style="transform: translate3d(0px, 0px, 0px)">
              <div class="swiper-slide swiper-slide-active" style="width: 100%" v-for="(image, index) in images" :key="index">
                <img :src="isHttp(image.imgUrl)" alt="Banner Image" style="width: 100% "/>
              </div>
            </div>
            &lt;!&ndash; <div class="swiper-pagination"></div>
          <div class="swiper-button-prev"></div>
          <div class="swiper-button-next"></div> &ndash;&gt;
            <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
          </div>-->
    <!--      轮播图-->
    <div class="swiper-container" id="swiper-banner">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(image, index) in images" :key="index" style="width: 100%">
          <img :src="isHttp(image.imgUrl)" alt="Banner Image" style="width: 100%"/>
          <div class="button-group" style="text-align: center;margin:10px 0">
            <el-image :src="isHttp(image.imgUrl)" alt="上传图片" style="width:70px;height:50px;" /><!-- :preview-src-list="[isHttp(image.imgUrl)]"预览图片-->
            <el-upload
                class="upload-demo"
                :action="`${apiUrl}/banner/updateBanner`"
                :show-file-list="false"
                :on-success="(response, file) => handleSuccess(response, file, image.id)"
                :before-upload="beforeUpload"
                :data="{ id: image.id }"
            >
              <el-button size="small" type="primary">{{globalLanguage.languageSuffix ==='Cn'?'修改图片':'上传图片'}}</el-button>
            </el-upload>
          </div>
        </div>
      </div>
      <!-- <div class="swiper-pagination"></div>
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div> -->
      <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
    </div>
  </div>
  <div class="banner" v-else>
    <div class="block text-center">
      <el-carousel  class="carousel"
                    :interval="2500"
                    height="200px"
                    :initial-index="0"
                    ref="carousel"
                    :autoplay="true"
                    arrow="always"
                    v-if="images.length>0">
        <el-carousel-item v-for="(image, index) in images " :key="index" >
          <img :src="isHttp(image.imgUrl)" alt="案例展示" class="carousel-image"/>
          <!--          <img :src="`${item}`" alt="案例展示" class="carousel-image"/>-->
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
  <div class="index-container" v-if="config && windowWidth > 992">

    <div class="fl_1" >
      <div class="max-1200 u-flex u-flex-wrap" style="display: flex">
        <div @click="change('about')" class="item">
          <img src="@/assets/image/index/zhui.png" alt="" class="ic"/>
<!--          {{globalLanguage.languageSuffix ==='Cn'?'物流追踪':'отслеживание грузов'}}-->
          <el-input type="text"  v-model="config['link1' + globalLanguage.languageSuffix].v" id="zhui" style="width: 200px" @click.stop />
          <el-button type="success" @click="changeconfigmap(config['link1' + globalLanguage.languageSuffix])" @click.stop>{{globalLanguage.languageSuffix ==='Cn'?'修改':'Изменить'}}</el-button>
        </div>

        <div @click="change('business')" class="item">
          <img
            src="@/assets/image/index/fa.png"
            alt=""
            class="ic"
          />
<!--          {{globalLanguage.languageSuffix ==='Cn'?'时效查询':'отслеживание сроков доставки'}}-->
          <el-input type="text" v-model="config['link2' + globalLanguage.languageSuffix].v" id="fa" style="width: 200px" @click.stop/>
          <el-button type="success" @click="changeconfigmap(config['link2' + globalLanguage.languageSuffix])" @click.stop>{{globalLanguage.languageSuffix ==='Cn'?'修改':'Изменить'}}</el-button>

        </div>

        <div @click="change('service')" class="item">
          <img
            src="@/assets/image/index/hao.png"
            alt=""
            class="ic"
          />
<!--          {{globalLanguage.languageSuffix ==='Cn'?'在线下单':'заказ онлайн'}}-->
          <el-input type="text" v-model="config['link3' + globalLanguage.languageSuffix].v" id="hao" style="width: 200px" @click.stop/>
          <el-button type="success" @click="changeconfigmap(config['link3' + globalLanguage.languageSuffix])" @click.stop>{{globalLanguage.languageSuffix ==='Cn'?'修改':'Изменить'}}</el-button>

        </div>
        <div @click="change('contant')" class="item">
          <img
            src="@/assets/image/index/cha.png"
            alt=""
            class="ic"
          />
<!--          {{globalLanguage.languageSuffix ==='Cn'?'客服支持':'клиентская поддержка'}}-->
          <el-input type="text" v-model="config['link4' + globalLanguage.languageSuffix].v" id="cha" style="width: 200px" @click.stop/>
          <el-button type="success" @click="changeconfigmap(config['link4' + globalLanguage.languageSuffix])" @click.stop>{{globalLanguage.languageSuffix ==='Cn'?'修改':'Изменить'}}</el-button>

        </div>
        <!--  <a href="" class="item">
              <img src="/template/web/default/skin/img/image/kehu.png" alt="" class="ic"> 境外清关
          </a> -->
      </div>
    </div>

    <div class="fl_2 max-1200">
      <div class="title-box">
        <div class="title">
          <el-input type="text" size="large" v-model="config['goodattitle'+ globalLanguage.languageSuffix].v" id="goodattitle" style="width: 200px"/>
          <el-button type="success" @click="changeconfigmap(config['goodattitle'+ globalLanguage.languageSuffix])" style="margin-left: 10px">{{globalLanguage.languageSuffix ==='Cn'?'修改':'Изменить'}}</el-button>
        </div>
        <div class="line"></div>
        <div class="subtitle">
<!--          <div
            class="subtitle"
            v-html="config['goodat' + globalLanguage.languageSuffix]"
          ></div>-->
<!--文本域类型          -->
          <el-input type="textarea" :rows="4" cols="50" v-model="config['goodat' + globalLanguage.languageSuffix].v" id="goodat"/>
        </div>
        <!--        修改完所有输入框点击此按钮进行修改-->
        <el-button type="success" @click="changeconfigmap(config['goodat' + globalLanguage.languageSuffix])" style="margin: 10px 0">修改</el-button>
      </div>
      <div class="list">
        <div class="li" >
          <img
          :src="isHttp(config['goodatImgUrl1'].v)"
            alt=""
            class="pic"
          />
          <el-upload
              class="upload-btn"
              :action="`${apiUrl}/configMap/upadaetConfigMapPic`"
              :show-file-list="false"
              :on-success="handleSuccess"
              :before-upload="beforeUpload"
              :data="{ id: config['goodatImgUrl1'].id }">
            <el-button size="small" type="primary">修改图片</el-button>
          </el-upload>
          <div class="info">
            <div class="tit">
              <el-input type="text" v-model="config['goodatshort1'+ globalLanguage.languageSuffix].v" />
            </div>
            <el-button style="margin-top: 10px" type="success" @click="changeconfigmap(config['goodatshort1' + globalLanguage.languageSuffix])" @click.stop>{{globalLanguage.languageSuffix ==='Cn'?'修改':'Изменить'}}</el-button>
            <div class="type">{{globalLanguage.languageSuffix ==='Cn'?'风速达':'Группа Фэнь Сюда'}}</div>
            <div class="desc">
<!--              {{ config["goodatshort1desc" + globalLanguage.languageSuffix] }}-->
              <el-input type="text"  v-model="config['goodatshort1desc' + globalLanguage.languageSuffix].v" id="goodatshort1desc"/>
            </div>
            <el-button style="margin-top: 10px" type="success" @click="changeconfigmap(config['goodatshort1desc' + globalLanguage.languageSuffix])" @click.stop>{{globalLanguage.languageSuffix ==='Cn'?'修改':'Изменить'}}</el-button>
          </div>
        </div>
        <div class="li" >
          <img
          :src="isHttp(config['goodatImgUrl2'].v)"
            alt=""
            class="pic"
          />
          <el-upload
              class="upload-btn"
              :action="`${apiUrl}/configMap/upadaetConfigMapPic`"
              :show-file-list="false"
              :on-success="handleSuccess"
              :before-upload="beforeUpload"
              :data="{ id: config['goodatImgUrl2'].id }">
            <el-button size="small" type="primary">修改图片</el-button>
          </el-upload>
          <div class="info">
            <div class="tit">
<!--              {{ config["goodatshort2" + globalLanguage.languageSuffix] }}-->
            <el-input type="text" v-model="config['goodatshort2' + globalLanguage.languageSuffix].v" id="goodatshort2"/>
            </div>
            <el-button style="margin-top: 10px" type="success" @click="changeconfigmap(config['goodatshort2' + globalLanguage.languageSuffix])" @click.stop>{{globalLanguage.languageSuffix ==='Cn'?'修改':'Изменить'}}</el-button>
            <div class="type">{{globalLanguage.languageSuffix ==='Cn'?'风速达':'Группа Фэнь Сюда'}}</div>
            <div class="desc">
<!--              {{ config["goodatshort2desc" + globalLanguage.languageSuffix] }}-->
              <el-input type="text" v-model="config['goodatshort2desc' + globalLanguage.languageSuffix].v" id="goodatshort2desc"/>
            </div>
            <el-button style="margin-top: 10px" type="success" @click="changeconfigmap(config['goodatshort2desc' + globalLanguage.languageSuffix])" @click.stop>{{globalLanguage.languageSuffix ==='Cn'?'修改':'Изменить'}}</el-button>
          </div>
        </div>
        <div class="li">
          <img
          :src="isHttp(config['goodatImgUrl3'].v)"
            alt=""
            class="pic"
          />
          <el-upload
              class="upload-btn"
              :action="`${apiUrl}/configMap/upadaetConfigMapPic`"
              :show-file-list="false"
              :on-success="handleSuccess"
              :before-upload="beforeUpload"
              :data="{ id: config['goodatImgUrl3'].id }">
            <el-button size="small" type="primary">修改图片</el-button>
          </el-upload>
          <div class="info">
            <div class="tit">
<!--              {{ config["goodatshort3" + globalLanguage.languageSuffix] }}-->
            <el-input type="text" v-model="config['goodatshort3' + globalLanguage.languageSuffix].v" id="goodatshort3"/>
            </div>
            <el-button style="margin-top: 10px" type="success" @click="changeconfigmap(config['goodatshort3' + globalLanguage.languageSuffix])" @click.stop>{{globalLanguage.languageSuffix ==='Cn'?'修改':'Изменить'}}</el-button>
            <div class="type">{{globalLanguage.languageSuffix ==='Cn'?'风速达':'Группа Фэнь Сюда'}}</div>
            <div class="desc">
<!--              {{ config["goodatshort3desc" + globalLanguage.languageSuffix] }}-->
              <el-input type="text" v-model="config['goodatshort3desc' + globalLanguage.languageSuffix].v" id="goodatshort3desc"/>
            </div>
            <el-button style="margin-top: 10px" type="success" @click="changeconfigmap(config['goodatshort3desc' + globalLanguage.languageSuffix])" @click.stop>{{globalLanguage.languageSuffix ==='Cn'?'修改':'Изменить'}}</el-button>
          </div>
        </div>
        <div class="li">
          <img
          :src="isHttp(config['goodatImgUrl4'].v)"
            alt=""
            class="pic"
          />
          <el-upload
              class="upload-btn"
              :action="`${apiUrl}/configMap/upadaetConfigMapPic`"
              :show-file-list="false"
              :on-success="handleSuccess"
              :before-upload="beforeUpload"
              :data="{ id: config['goodatImgUrl4'].id }">
            <el-button size="small" type="primary">修改图片</el-button>
          </el-upload>
          <div class="info">
            <div class="tit">
<!--              {{ config["goodatshort4" + globalLanguage.languageSuffix] }}-->
              <el-input type="text" v-model="config['goodatshort4' + globalLanguage.languageSuffix].v" id="goodatshort4"/>
            </div>
            <el-button   type="success" @click="changeconfigmap(config['goodatshort4' + globalLanguage.languageSuffix])" @click.stop>{{globalLanguage.languageSuffix ==='Cn'?'修改':'Изменить'}}</el-button>
            <div class="type">{{globalLanguage.languageSuffix ==='Cn'?'风速达':'Группа Фэнь Сюда'}}</div>
            <div class="desc">
<!--              {{ config["goodatshort4desc" + globalLanguage.languageSuffix] }}-->
              <el-input type="text" v-model="config['goodatshort4desc' + globalLanguage.languageSuffix].v" id="goodatshort4desc"/>
            </div>
            <el-button style="margin-top: 10px" type="success" @click="changeconfigmap(config['goodatshort4desc' + globalLanguage.languageSuffix])" @click.stop>{{globalLanguage.languageSuffix ==='Cn'?'修改':'Изменить'}}</el-button>
          </div>
        </div>
        <div class="li">
          <img
          :src="isHttp(config['goodatImgUrl5'].v)"
            alt=""
            class="pic"
          />
          <el-upload
              class="upload-btn"
              :action="`${apiUrl}/configMap/upadaetConfigMapPic`"
              :show-file-list="false"
              :on-success="handleSuccess"
              :before-upload="beforeUpload"
              :data="{ id: config['goodatImgUrl5'].id }">
            <el-button size="small" type="primary">修改图片</el-button>
          </el-upload>
          <div class="info">
            <div class="tit">
<!--              {{ config["goodatshort5" + globalLanguage.languageSuffix] }}-->
              <el-input type="text" v-model="config['goodatshort5' + globalLanguage.languageSuffix].v" id="goodatshort5"/>
            </div>
            <el-button type="success" @click="changeconfigmap(config['goodatshort5' + globalLanguage.languageSuffix])" @click.stop>{{globalLanguage.languageSuffix ==='Cn'?'修改':'Изменить'}}</el-button>
            <div class="type">{{globalLanguage.languageSuffix ==='Cn'?'风速达':'Группа Фэнь Сюда'}}</div>
            <div class="desc">
<!--              {{ config["goodatshort5desc" + globalLanguage.languageSuffix] }}-->
              <el-input type="text" v-model="config['goodatshort5desc' + globalLanguage.languageSuffix].v" id="goodatshort5desc"/>
            </div>
            <el-button style="margin-top: 10px" type="success" @click="changeconfigmap(config['goodatshort5desc' + globalLanguage.languageSuffix])" @click.stop>{{globalLanguage.languageSuffix ==='Cn'?'修改':'Изменить'}}</el-button>
          </div>
        </div>
      </div>
    </div>

    <div class="fl_3">
      <div class="max-1200">
        <div class="title-box white">
          <div class="title">
<!--            {{globalLanguage.languageSuffix ==='Cn'?'四大专线':'Четыре главные специализированные линии'}}-->
            <el-input type="text" size="large" v-model="config['sdzxtitle'+ globalLanguage.languageSuffix].v" id="title" style="width: 200px"/>
            <el-button type="success" @click="changeconfigmap(config['sdzxtitle'+ globalLanguage.languageSuffix])" style="margin-left: 10px">{{globalLanguage.languageSuffix ==='Cn'?'修改':'Изменить'}}</el-button>
          </div>
          <div class="line"></div>
          <div class="subtitle">
<!--            {{ config["sdzx" + globalLanguage.languageSuffix] }}-->
            <el-input type="textarea" :rows="4" cols="70" v-model="config['sdzx' + globalLanguage.languageSuffix].v" id="sdzx"/>
          </div>
          <!--        修改完所有输入框点击此按钮进行修改-->
          <el-button type="success" @click="changeconfigmap(config['sdzx' + globalLanguage.languageSuffix])" style="margin: 10px 0">修改</el-button>
        </div>

        <div class="list" style="display: flex; flex-wrap: wrap; gap: 10px">
          <div
            class="li li-0"
            style="flex: 1 1 calc(25% - 10px); box-sizing: border-box"
          >
            <div
              class="pic"
              :style='{ "background-image": `url(${isHttp(config["sdzxpic1Cn"].v)})` }'
              style="height: 200px; background-size: cover"
            >
              <el-upload
                  class="upload-btn"
                  :action="`${apiUrl}/configMap/upadaetConfigMapPic`"
                  :show-file-list="false"
                  :on-success="handleSuccess"
                  :before-upload="beforeUpload"
                  :data="{ id: config['sdzxpic1Cn'].id }">
                <el-button size="small" type="primary">修改图片</el-button>
              </el-upload>
            </div>
            <div class="info">
              <div class="tit line-1">
<!--                {{ config["sdzxtitle1" + globalLanguage.languageSuffix] }}-->
                <el-input type="text" v-model="config['sdzxtitle1' + globalLanguage.languageSuffix].v" id="sdzxtitle1"/>
              </div>
              <el-button type="success" @click="changeconfigmap(config['sdzxtitle1' + globalLanguage.languageSuffix])" @click.stop>{{globalLanguage.languageSuffix ==='Cn'?'修改':'Изменить'}}</el-button>
            </div>
          </div>

          <div
            class="li li-0"
            style="flex: 1 1 calc(25% - 10px); box-sizing: border-box"
          >
            <div class="pic" :style='{ "background-image": `url(${isHttp(config["sdzxpic2Cn"].v)})` }' style="height: 200px; background-size: cover">

              <el-upload
                  class="upload-btn"
                  :action="`${apiUrl}/configMap/upadaetConfigMapPic`"
                  :show-file-list="false"
                  :on-success="handleSuccess"
                  :before-upload="beforeUpload"
                  :data="{ id: config['sdzxpic2Cn'].id }">
                <el-button size="small" type="primary">修改图片</el-button>
              </el-upload>
            </div>
            <div class="info">
              <div class="tit line-1">
<!--                {{ config["sdzxtitle2" + globalLanguage.languageSuffix] }}-->
                <el-input type="text" v-model="config['sdzxtitle2' + globalLanguage.languageSuffix].v" id="sdzxtitle2"/>
              </div>
              <el-button type="success" @click="changeconfigmap(config['sdzxtitle2' + globalLanguage.languageSuffix])" @click.stop>{{globalLanguage.languageSuffix ==='Cn'?'修改':'Изменить'}}</el-button>
            </div>
          </div>

          <div
            class="li li-0"
            style="flex: 1 1 calc(25% - 10px); box-sizing: border-box"
          >
            <div
              class="pic"
              :style='{ "background-image": `url(${isHttp(config["sdzxpic3Cn"].v)})` }'
              style="height: 200px; background-size: cover"
            >
              <el-upload
                  class="upload-btn"
                  :action="`${apiUrl}/configMap/upadaetConfigMapPic`"
                  :show-file-list="false"
                  :on-success="handleSuccess"
                  :before-upload="beforeUpload"
                  :data="{ id: config['sdzxpic3Cn'].id }">
                <el-button size="small" type="primary">修改图片</el-button>
              </el-upload>
            </div>
            <div class="info">
              <div class="tit line-1">
<!--                {{ config["sdzxtitle3" + globalLanguage.languageSuffix] }}-->
                <el-input type="text" v-model="config['sdzxtitle3' + globalLanguage.languageSuffix].v" id="sdzxtitle3"/>
              </div>
              <el-button type="success" @click="changeconfigmap(config['sdzxtitle3' + globalLanguage.languageSuffix])" @click.stop>{{globalLanguage.languageSuffix ==='Cn'?'修改':'Изменить'}}</el-button>
            </div>
          </div>

          <div
            class="li li-0"
            style="flex: 1 1 calc(25% - 10px); box-sizing: border-box"
          >
            <div
              class="pic"
              :style='{ "background-image": `url(${isHttp(config["sdzxpic4Cn"].v)})` }'
              style="height: 200px; background-size: cover"
            >
              <el-upload
                  class="upload-btn"
                  :action="`${apiUrl}/configMap/upadaetConfigMapPic`"
                  :show-file-list="false"
                  :on-success="handleSuccess"
                  :before-upload="beforeUpload"
                  :data="{ id: config['sdzxpic4Cn'].id }">
                <el-button size="small" type="primary">修改图片</el-button>
              </el-upload>
            </div>
            <div class="info">
              <div class="tit line-1">
<!--                {{ config["sdzxtitle4" + globalLanguage.languageSuffix] }}-->
                <el-input type="text" v-model="config['sdzxtitle4' + globalLanguage.languageSuffix].v" id="sdzxtitle4"/>
              </div>
              <el-button type="success" @click="changeconfigmap(config['sdzxtitle4' + globalLanguage.languageSuffix])" @click.stop>{{globalLanguage.languageSuffix ==='Cn'?'修改':'Изменить'}}</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="fl_4">
      <!-- <div class="title-box">
        <div class="title">中俄一车通零担拼车</div>
        <div class="line"></div>
      </div>
      <div class="cont">
        <p v-html="config['zeycd' + globalLanguage.languageSuffix]"></p>
      </div> -->
      <div class="fl_1">
      <div class="max-1200 u-flex " style="display: flex">
        <div @click="change('exhibition')"  class="item">
          <img src="@/assets/image/index/zhui.png" alt="" class="ic"/>
<!--          {{globalLanguage.languageSuffix === "Cn" ? "慢陆" : "Медленная суша" }}-->
          <el-input type="text" v-model="config['manlu'+ globalLanguage.languageSuffix].v" id="zeycd" @click.stop/>
          <el-button style="margin-right: 10px" type="success" @click="changeconfigmap(config['manlu'+ globalLanguage.languageSuffix])" @click.stop>{{globalLanguage.languageSuffix ==='Cn'?'修改':'Изменить'}}</el-button>
        </div>
        <div @click="change('exhibition')" class="item">
          <img src="@/assets/image/index/fa.png" alt="" class="ic"/>
<!--          {{globalLanguage.languageSuffix === "Cn" ? "快陆" : "Быстро!" }}-->
          <el-input type="text" v-model="config['kuailu'+ globalLanguage.languageSuffix].v" id="zeycd" @click.stop/>
          <el-button style="margin-right: 10px" type="success" @click="changeconfigmap(config['kuailu'+ globalLanguage.languageSuffix])" @click.stop>{{globalLanguage.languageSuffix ==='Cn'?'修改':'Изменить'}}</el-button>
        </div>
        <div @click="change('/exhibition')"  target="_blank"  class="item">
          <img
            src="@/assets/image/index/hao.png"
            alt=""
            class="ic"
          />
<!--          {{globalLanguage.languageSuffix === "Cn" ? "铁路" : "Железнодорожный транспорт" }}-->
          <el-input type="text" v-model="config['tielu'+ globalLanguage.languageSuffix].v" id="zeycd" @click.stop/>
          <el-button style="margin-right: 10px" type="success" @click="changeconfigmap(config['tielu'+ globalLanguage.languageSuffix])" @click.stop>{{globalLanguage.languageSuffix ==='Cn'?'修改':'Изменить'}}</el-button>
        </div>
        <div @click="change('/exhibition')" target="_blank"  class="item">
          <img
            src="@/assets/image/index/hao.png"
            alt=""
            class="ic"
          />
<!--          {{globalLanguage.languageSuffix === "Cn"-->
<!--                ? "空运"-->
<!--                : "Воздушные перевозки"-->
<!--            }}-->
          <el-input type="text" v-model="config['kongyun'+ globalLanguage.languageSuffix].v" id="zeycd" @click.stop/>
          <el-button style="margin-right: 10px" type="success" @click="changeconfigmap(config['kongyun'+ globalLanguage.languageSuffix])" @click.stop>{{globalLanguage.languageSuffix ==='Cn'?'修改':'Изменить'}}</el-button>
        </div>
        <div @click="change('/exhibition')"  class="item">
          <img
            src="@/assets/image/index/cha.png"
            alt=""
            class="ic"
          />
<!--          {{globalLanguage.languageSuffix === "Cn"-->
<!--                ? "海运"-->
<!--                : "Морские перевозки"-->
<!--            }}-->
          <el-input type="text" v-model="config['haiyun'+ globalLanguage.languageSuffix].v" id="zeycd" @click.stop/>
          <el-button style="margin-right: 10px" type="success" @click="changeconfigmap(config['haiyun'+ globalLanguage.languageSuffix])" @click.stop>{{globalLanguage.languageSuffix ==='Cn'?'修改':'Изменить'}}</el-button>
        </div>
        <!--  <a href="" class="item">
              <img src="/template/web/default/skin/img/image/kehu.png" alt="" class="ic"> 境外清关
          </a> -->

      </div>
    </div>
    </div>

    <div class="fl_5">
      <div class="max-1200">
        <div class="title-box white">
          <div class="title">
            <el-input type="text" size="large" v-model="config['adoutustitle'+ globalLanguage.languageSuffix].v" id="aboutusTitle" style="width: 200px"/>
            <el-button type="success" @click="changeconfigmap(config['adoutustitle'+ globalLanguage.languageSuffix])" style="margin-left: 10px">{{globalLanguage.languageSuffix ==='Cn'?'修改':'Изменить'}}</el-button>
          </div>
          <div class="line"></div>
<!--          <div class="subtitle" v-html="config['aboutus' + globalLanguage.languageSuffix]">-->
<!--          </div>-->
              <el-input type="textarea" :rows="4" cols="50" v-model="config['aboutus' + globalLanguage.languageSuffix].v" id="aboutus"/>
           <el-button style="margin-top: 10px" type="success" @click="changeconfigmap(config['aboutus' + globalLanguage.languageSuffix])">{{globalLanguage.languageSuffix ==='Cn'?'修改':'Изменить'}}</el-button>
        </div>
        <div class="flex u-flex-wrap">
          <div class="left">
<!--            <div class="text" v-html="config['aboutusdesc' + globalLanguage.languageSuffix]"></div>-->
            <el-input type="textarea" :rows="10" cols="50"  v-model="config['aboutusdesc' + globalLanguage.languageSuffix].v" id="aboutusdesc"/>
            <!-- <a href="" class="btn">了解更多</a> -->
            <el-button type="success" @click="changeconfigmap(config['aboutusdesc' + globalLanguage.languageSuffix])">{{globalLanguage.languageSuffix ==='Cn'?'修改':'Изменить'}}</el-button>
            <div @click="change('contant')"  class="btn">
<!--              {{globalLanguage.languageSuffix == "Cn" ? "了解更多" : "Больше" }}-->
              <el-input type="text" v-model="config['knowmore'+ globalLanguage.languageSuffix].v" id="aboutusbtn"/>
            </div>
            <el-button style="margin-left: 89%;margin-top: 10px" type="success" @click="changeconfigmap(config['knowmore'+ globalLanguage.languageSuffix])">{{globalLanguage.languageSuffix ==='Cn'?'修改':'Изменить'}}</el-button>
          </div>
          <div class="right">
            <img
            :src="isHttp(config['aboutusPic'].v)"
              alt=""
              class="w-100"
            />
            <el-upload
                class="upload-btn"
                :action="`${apiUrl}/configMap/upadaetConfigMapPic`"
                :show-file-list="false"
                :on-success="handleSuccess"
                :before-upload="beforeUpload"
                :data="{ id: config['aboutusPic'].id }">
              <el-button size="small" type="primary">修改图片</el-button>
            </el-upload>
          </div>
        </div>
      </div>
    </div>


  </div>
  <div class="shouyeElement" style="text-align: center;" v-else-if="config && windowWidth <= 992" >
    <!--4个链接-->
    <div class="server-info" >
      <!--点击跳转到物流追踪页面-->
      <a href="javascript:void(0);" style="border-bottom:dashed 1px #ffffff;border-right: dashed 1px #ffffff ">
        <i class="iconfont icon-dingwei"></i> {{config['link1' + globalLanguage.languageSuffix].v}}
      </a>
      <a href="javascript:void(0);"style="border-bottom: dashed 1px #ffffff">
        <i class="iconfont icon-search"></i> {{config['link2' + globalLanguage.languageSuffix].v}}
      </a>
      <a href="javascript:void(0);" style="border-right: dashed 1px #ffffff"><i class="iconfont icon-dianzan"></i> {{config['link3' + globalLanguage.languageSuffix].v}}</a>
      <a href="javascript:void(0);" ><i class="iconfont icon-zixun"></i> {{config['link4' + globalLanguage.languageSuffix].v}}</a>
    </div>
    <!--  公司优势-->
    <div class="CompanyIntroduce">
      <div class="CompanyIntroduceTitle">
        <div class="CompanyName">{{config['goodattitle'+ globalLanguage.languageSuffix].v}}</div>
        <div class="line"></div>
        <div class="CompanyContent">
          <p >
            {{config['goodat'+ globalLanguage.languageSuffix].v}}
          </p>
        </div>
      </div>
      <div style="width: 360px; height: 100%; margin: 0 auto">
        <el-card style="width: 360px; height: 100%" class="elCard">
          <img :src="isHttp(config['goodatImgUrl1'].v)"
               alt=""
               class="pic"
          />
          <div class="content">
            <div class="title">{{config['goodatshort1'+ globalLanguage.languageSuffix].v}}</div>
          </div>
          <div class="type">{{globalLanguage.languageSuffix ==='Cn'?'风速达':'Группа Фэнь Сюда'}}</div>
          <div class="desc">{{config['goodatshort1desc'+ globalLanguage.languageSuffix].v}}</div>
        </el-card>
        <el-card style="width: 360px; height: 100%" class="elCard">
          <img :src="isHttp(config['goodatImgUrl2'].v)"
               alt=""
               class="pic"
          />
          <div class="content">
            <div class="title">{{config['goodatshort2'+ globalLanguage.languageSuffix].v}}</div>
          </div>
          <div class="type">{{globalLanguage.languageSuffix ==='Cn'?'风速达':'Группа Фэнь Сюда '}}</div>
          <div class="desc">{{config['goodatshort2desc'+ globalLanguage.languageSuffix].v}}</div>
        </el-card>
        <el-card style="width: 360px; height: 100%" class="elCard">
          <img :src="isHttp(config['goodatImgUrl3'].v)"
               alt=""
               class="pic"
          />
          <div class="content">
            <div class="title">{{config['goodatshort3'+ globalLanguage.languageSuffix].v}}</div>
          </div>
          <div class="type">{{globalLanguage.languageSuffix ==='Cn'?'风速达':'Группа Фэнь Сюда'}}</div>
          <div class="desc">{{config['goodatshort3desc'+ globalLanguage.languageSuffix].v}}</div>
        </el-card>
        <el-card style="width: 360px; height:100%" class="elCard">
          <img :src="isHttp(config['goodatImgUrl4'].v)"
               alt=""
               class="pic"
          />
          <div class="content">
            <div class="title">{{config['goodatshort4'+ globalLanguage.languageSuffix].v}}</div>
          </div>
          <div class="type">{{globalLanguage.languageSuffix ==='Cn'?'风速达':'Группа Фэнь Сюда'}}</div>
          <div class="desc">{{config['goodatshort4desc'+ globalLanguage.languageSuffix].v}}</div>
        </el-card>
        <el-card style="width: 360px; height: 100%" class="elCard">
          <img :src="isHttp(config['goodatImgUrl5'].v)"
               alt=""
               class="pic"
          />
          <div class="content">
            <div class="title">{{config['goodatshort5'+ globalLanguage.languageSuffix].v}}</div>
          </div>
          <div class="type">{{globalLanguage.languageSuffix ==='Cn'?'风速达':'Группа Фэнь Сюда'}}</div>
          <div class="desc">{{config['goodatshort5desc'+ globalLanguage.languageSuffix].v}}</div>
        </el-card>
      </div>
    </div>
    <!-- 四大专线 -->
    <div class="Companyzhuanxian">
      <div class="server">
        <div class="servertopic">
          <div class="servertitle">{{config['sdzxtitle'+ globalLanguage.languageSuffix].v}}</div>
          <div class="line"></div>
          <div class="subtitle"  style="padding: 16px">
            <p class="pcorlor">
              {{config['sdzx'+ globalLanguage.languageSuffix].v}}
            </p>
          </div>
        </div>
        <div class="nocongtent" style="height: 20px"></div>
        <div class="container">
          <div class="zhuangxian">
            <div class="max-1200 u-flex u-flex-wrap h-100">
              <a href="javascript:void(0);" class="">{{config['sdzxtitle1'+ globalLanguage.languageSuffix].v}}</a>
              <a href="javascript:void(0);" class="">{{config['sdzxtitle2'+ globalLanguage.languageSuffix].v}}</a>
              <a href="javascript:void(0);" class="">{{config['sdzxtitle3'+ globalLanguage.languageSuffix].v}}</a>
              <a href="javascript:void(0);" class="">{{config['sdzxtitle4'+ globalLanguage.languageSuffix].v}}</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 强势路线 -->
    <div class="Companyzhuanxian">
      <div class="server">
        <div class="servertopic">
          <div class="servertitle">{{config['qslxtitle'+ globalLanguage.languageSuffix].v}}</div>
          <div class="line"></div>
          <div class="subtitle">
            <p class="pcorlor">
              {{globalLanguage.languageSuffix=== 'Cn'?'风速达集团在中俄国际物流通道建设方面实力雄厚':'Группа Фэнь Сюда (Fengsuda Group) обладает мощными возможностями в строительстве международных логистических каналов между Китаем и Россией.'}}<br />
              {{globalLanguage.languageSuffix ==='Cn'?'为了顺应中俄贸易的各种趋势，倾力研究并打造了多个运输渠道。':'Для адаптации к различным тенденциям торговли между Китаем и Россией, группа Фэнь Сюда (Fengsuda Group) приложила все усилия к исследованию и созданию нескольких транспортных каналов'}}
            </p>
          </div>
        </div>
        <div class="nocongtent" style="height: 20px"></div>
        <div class="container">
          <div class="zhuangxian">
            <div class="max-1200 u-flex u-flex-wrap h-100">
              <a href="javascript:void(0);" class="active">{{config['manlu'+ globalLanguage.languageSuffix].v}}</a>
              <a href="javascript:void(0);" class="active">{{config['kuailu'+ globalLanguage.languageSuffix].v}}</a>
              <a href="javascript:void(0);" class="active">{{config['tielu'+ globalLanguage.languageSuffix].v}}</a>
              <a href="javascript:void(0);" class="active">{{config['kongyun'+ globalLanguage.languageSuffix].v}}</a>
              <a href="javascript:void(0);" class="active">{{config['haiyun'+ globalLanguage.languageSuffix].v}}</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 车运内容-->
    <div class="server-content">
      <div>
        <div class="CompanyName">{{config['zeycdtitle'+ globalLanguage.languageSuffix].v}}</div>
        <div class="line"></div>
      </div>
      <div class="content">
        {{config['zeycd'+ globalLanguage.languageSuffix].v}}
      </div>
    </div>
    <!-- 关于我们 -->
    <div class="about-us">
      <div class="about">
        <div class="title-box">
          <div class="servertitle">{{config['adoutustitle'+ globalLanguage.languageSuffix].v}}</div>
          <div class="line"></div>
          <div class="content1">
            <p class="pcorlor1">
              {{config['aboutus'+ globalLanguage.languageSuffix].v}}
            </p>
          </div>
        </div>
        <div class="about-content">
          <div class="about-up">
            <div class="up1">
              {{config['aboutusdesc'+ globalLanguage.languageSuffix].v}}
            </div>
            <div class="up2">
              <a class="btn1" @click="change('about')">{{config['knowmore'+ globalLanguage.languageSuffix].v}}</a>
            </div>
          </div>
        </div>
        <div class="img-box">
          <img
              :src="isHttp(config['aboutusPic'].v)"
          />
        </div>
      </div>
    </div>
    <!-- 公司案列展示 -->
    <div class="CompanyBusiness" style="margin-top:10px;margin-bottom:20px">
      <div class="server">
        <div class="servertopic">
          <div class="servertitle">{{globalLanguage.languageSuffix ==='Cn'?'公司案例展示':'Примеры работы'}}</div>
          <div class="line"></div>
          <div class="subtitle">
            <p class="pcorlor" style="font-size: 12px;color: #ffffff;margin-top:10px">
              {{globalLanguage.languageSuffix ==='Cn'?'展示公司在中俄贸易中的成功案例，让您更加了解我们。':'Показываем, как компания справляется с задачами в сфере торговли между Китаем и Россией. Это позволяет вам понять, как мы работаем, и узнать, какие услуги мы можем предложить.'}}
            </p>
          </div>
        </div>
        <div class="Btn">
          <el-button
              :class="{ 'active-button': activeButton === '专线服务' }"
              size="large"
              style="margin-top: 20px; margin-bottom: 20px;width: auto;font-size: 10px"
              @mousedown="setActiveButton('专线服务')"
              @mouseup="aa('专线服务')"
          >
            {{globalLanguage.languageSuffix ==='Cn'?'专线服务':'Специализированные линии'}}
          </el-button>
          <el-button
              :class="{ 'active-button': activeButton === '运输服务' }"
              size="large"
              style="margin-top: 20px; margin-bottom: 20px;width: auto;font-size: 10px"
              @mousedown="setActiveButton('运输服务')"
              @mouseup="aa('运输服务')"
          >
            {{globalLanguage.languageSuffix ==='Cn'?'运输服务':'Транспортные услуги'}}
          </el-button>
        </div>
        <div class="lunbotu">
          <el-carousel
              class="carousel"
              :interval="2500"
              type="card"
              height="200px"
              :initial-index="4"
              ref="carousel"
              :autoplay="auto"
          >
            <el-carousel-item v-for="(item, index) in images" :key="index">
              <img :src="isHttp(item.imgUrl)" alt="案例展示" class="carousel-image"/>
            </el-carousel-item>
          </el-carousel>
        </div>

      </div>
    </div>
  </div>
</template>

<script setup>
import '@/assets/css/zhuanxian.css'
import '@/assets/css/shouye.css'
import Swiper from "swiper";
import "swiper/css";
import { Pagination, Autoplay } from "swiper/modules";
import "swiper/css/autoplay";
import "swiper/css/pagination";
import {listBanner, findOneConfigs, updateConfigs, finconfigmap, updateConfigMap} from "@/api/index.js";
import {onMounted, ref, getCurrentInstance, onUnmounted} from "vue";
import { ElMessage } from 'element-plus'
import {isHttp, islocahost} from "@/utils/index.js";
import { useRouter } from 'vue-router';
import service from "@/router/service/service.js";
import {createRouter as $router} from "vue-router/dist/vue-router.esm-browser.js";

const auto = ref(true); // 自动轮播
const items = ref([]); // 轮播图数据
const currentIndex = ref(0); // 轮播图索引
const activeButton = ref('专线服务'); // 按钮状态
const router = useRouter();
const globalLanguage = getCurrentInstance().appContext.config.globalProperties.globalLanguage;
const apiUrl = ref(import.meta.env.VITE_APP_BASE_API);
const images = ref([]);
const config = ref(null);
const carousel = ref(null);
const windowWidth = ref(window.innerWidth); // 用于判断当前窗口宽度
// 获取Vue实例的全局属性中的语言相关对象
const change =(data)=>{
  router.push("/admin/"+data);
}
const handleResize = () => {
  windowWidth.value = window.innerWidth;
};
const setActiveButton = (buttonName) => {
  activeButton.value = buttonName; // 更新当前激活的按钮
  if (buttonName === "专线服务") {
    currentIndex.value = 1; // 显示第二张图（索引从0开始）
  } else if (buttonName === "运输服务") {
    currentIndex.value = 6; // 显示第五张图（索引从0开始）
  }
  if (carousel.value) {
    carousel.value.setActiveItem(currentIndex.value);
  }
  auto.value = false;
};
const aa=(buttonName)=>{
  activeButton.value = buttonName; // 更新当前激活的按钮
  if (buttonName === "专线服务") {
    currentIndex.value = 1; // 显示第二张图（索引从0开始）
  } else if (buttonName === "运输服务") {
    currentIndex.value = 4; // 显示第五张图（索引从0开始）
  }
  auto.value = true;
};

onMounted(() => {
  window.addEventListener('resize', handleResize);
});

onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
});
const getList = async () => {
  try {
    const response = await listBanner(); //轮播图
    const data = await findOneConfigs();
    const configmap = await finconfigmap();
    images.value = response.list; // 设置获取到的图片数据
    let aa={}
    for (let item of configmap.configMapList) {
      aa[item.k]={
        v:item.v,
        id:item.id
      };
    }
    config.value =aa;
    console.log(config.value,"--sdsoj");
  // 设置获取到的配置数据

  } catch (error) {
    console.error("获取图片数据失败:", error);
  }
};
// 更换轮播图
//上传成功后回调
const handleSuccess = (response, file, id) => {
  console.log('上传成功的响应:', response);
  console.log('上传的文件信息:', file); // 查看文件信息
  if (response && response.url) {
    ElMessage.success("修改成功")
    //重新调用轮播图
    getList();
  }
};
// 在上传前检查文件的有效性
const beforeUpload = (file) => {
  console.log('准备上传的文件:', file); // 输出文件信息
  const isImage = file.type.startsWith('image/');
  console.log('是否是图片文件:', isImage);
  if (!isImage) {
    console.log('只能上传图片文件！');
    this.$message.error('上传的文件必须是图片！');
    return false; // 阻止上传
  }
  return true; // 继续上传
};
/*configmap的修改配置信息*/
const changeconfigmap = async (data) => {
  try {
    const response = await updateConfigMap(data);
    ElMessage.success("修改配置成功")
    console.log(response);
  } catch (error) {
    console.error("修改配置失败:", error);
  }
}

/*configs的修改配置信息*/
const changeText = async () => {
  try {
    const response = await updateConfigs(config.value);
    console.log(response);
    if (response.code === 200) {
      ElMessage.success("更新配置成功")
      //刷新页面
      getList();
    }else {
      ElMessage.error("更新配置失败")
    }
  } catch (error) {
    console.error("更新配置失败:", error);
  }
};
onMounted(() => {
  getList(); // 获取图片数据
  new Swiper("#swiper-banner", {
    modules: [Autoplay, Pagination],
    loop: true,
    // autoplay: {
    //   delay: 2000,
    // },
    autoplay: false, // 禁用自动轮播
  });

  new Swiper(".swiper-container1", {
    modules: [Autoplay, Pagination],
    loop: true,
    slidesPerView: 3,
    autoplay: {
      delay: 2000,
    },
  });
});
// @ts-ignore
</script>

<style scoped>
.swiper-slide img {
  height: 520px; /* 图片高度为滑块的100% */
  width: auto; /* 宽度自动，根据比例调整 */
  object-fit: cover; /* 确保图片不会变形，保持其比例并填充滑块 */
}

.router-link-exact-active,
.router-link-active {
  color: inherit; /* 继承父元素的颜色 */
  text-decoration: none; /* 去除下划线等装饰 */
  background-color: transparent; /* 背景透明 */
  pointer-events: auto; /* 确保可交互 */
}

.router-link {
  display: inline; /* 根据实际情况调整显示方式，这里设置为内联元素，可与其他 <a> 标签保持一致 */
  color: inherit;
  text-decoration: none;
  background-color: transparent;
  pointer-events: auto;
}

.router-link:hover {
  color: inherit; /* 鼠标悬停时继承父元素颜色，即变为黑色 */
  text-decoration: none;
  background-color: transparent;
  pointer-events: auto;
}

.index-container .fl_1 {
  padding: 0.625rem 0;
  background: -webkit-linear-gradient(left, #f6321e, #f08816);
background: linear-gradient(to right, #f6321e, #f08816);

}
.index-container .fl_1 .item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  border-left: 1px dashed #fff;
  width: 25%;
  height: 5rem;
  font-size: 1.25rem;
  color: #fff;
}
.index-container .fl_1 .item:first-child {
  border-left: none;
}
.index-container .fl_1 .item .ic {
  width: 2.125rem;
  height: 2.125rem;
  margin-right: 0.9375rem;
}
.index-container .fl_1 .item:hover {
  color: #000;
  font-weight: bold;
}

.index-container .fl_1 .item:hover .ic {
  -webkit-filter: invert(1);
  filter: invert(1);
}
.index-container .title-box {
  display: -webkit-box;
  display: -ms-flexbox;
  /* display: flex; */
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  text-align: center;
  margin-bottom: 3.125rem;
}
.index-container .title-box .title {
  display: block;
  font-size: 2rem;
  color: #333;
  font-weight: 600;
  margin-bottom: 1.25rem;
}
.index-container .title-box .line {
  width: 18.75rem;
  height: 2px;
  background-color: rgb(204, 204, 204);
  margin-bottom: 1.25rem;
}
.index-container .title-box .subtitle {
  font-size: 1rem;
  color: #666;
}
.index-container .title-box.white .title {
  color: #fff;
}
.index-container .title-box.white .line {
  background-color: #fff;
}
.index-container .title-box.white .subtitle {
  color: #fff;
}
.index-container .fl_2 {
  padding: 3.125rem 0 5rem;
}
.index-container .fl_2 .list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.index-container .fl_2 .list .li {
  text-align: center;
  width: calc(20% - 0.625rem);
  margin-right: 0.625rem;
  -webkit-box-shadow: 0.3125rem 0.3125rem 0.625rem #f2f2f2;
  box-shadow: 0.3125rem 0.3125rem 0.625rem #f2f2f2;
}
.index-container .fl_2 .list .li:nth-child(4n) {
  margin-right: 0;
}
.index-container .fl_2 .list .li .pic {
  width: 100%;
  height: 123px
}
.index-container .fl_2 .list .li .info {
  padding: 0 5% 1.25rem;
  text-align: center;
}
.index-container .fl_2 .list .li .tit {
  width: 100%;
  line-height: 3.125rem;
  text-align: center;
  color: #f29e1a;
  font-size: 1.125rem;
  font-weight: bold;
}
.index-container .fl_2 .list .li .type {
  font-size: 1rem;
  text-align: center;
  font-weight: bold;
  color: #ccc;
  margin-bottom: 1.25rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  white-space: nowrap;
}
.index-container .fl_2 .list .li .type::before {
  display: block;
  content: "";
  width: 6.25rem;
  height: 0.1875rem;
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    from(rgba(232, 232, 232, 0)),
    to(rgb(232, 232, 232))
  );
  background: linear-gradient(
    to right,
    rgba(232, 232, 232, 0),
    rgb(232, 232, 232)
  );
}
.index-container .fl_2 .list .li .type::after {
  display: block;
  content: "";
  width: 6.25rem;
  height: 0.1875rem;
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    from(rgb(232, 232, 232)),
    to(rgba(232, 232, 232, 0))
  );
  background: linear-gradient(
    to right,
    rgb(232, 232, 232),
    rgba(232, 232, 232, 0)
  );
}
.index-container .fl_2 .list .li .desc {
  font-size: 1rem;
  color: #666;
  line-height: 1.5625rem;
}

.index-container .fl_3 {
  width: 100%;
  background-color: #7e7e7e;
  padding: 1.875rem 0 5rem;
}
/* .index-container .fl_3 .tabs {
  text-align: center;
  margin-bottom: 3.125rem;
}
.index-container .fl_3 .tabs .item {
  padding: 0 1.25rem;
  text-align: center;
  cursor: pointer;
  height: 2.25rem;
  line-height: 2.25rem;
  border: 0.125rem solid #f29e1a;
  margin: 0 0.3125rem;
  border-radius: 0.5625rem;
  color: #fff;
  display: inline-block;
  -webkit-box-sizing: initial;
  box-sizing: initial;
}
.index-container .fl_3 .tabs .item.active {
  background-color: #f29e1a;
} */
.index-container .fl_3 .list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
}
.index-container .fl_3 .list .li {
  width: 100%;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
.index-container .fl_3 .list .li {
  width: 33.33%;
  padding: 0 0.3125rem;
}
.index-container .fl_3 .list .li .pic {
  width: 100%;
  height: 14.375rem;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}
.index-container .fl_3 .list .li .info {
  background-color: #fff;
  padding: 3% 5%;
  text-align: center;
}
.index-container .fl_3 .list .li .info .tit {
  font-size: 1rem;
  color: #333;
  margin-bottom: 0.625rem;
  text-align: center;
}
.index-container .fl_3 .list .li .info .des {
  line-height: 1.25rem;
  font-size: 0.875rem;
  color: #333;
}
.index-container .fl_4 {
  padding: 5.625rem 0;
}
.index-container .fl_4 .cont {
  margin-top: -3.125rem;
}
.index-container .fl_4 .cont p {
  display: block;
  font-size: 1.125rem;
  color: #333;
  line-height: 2.625rem;
  text-align: center;
}

.index-container .fl_5 {
  padding: 2.5rem 0;
  width: 100%;
  background-color: #7e7e7e; /* 更改为背景颜色 */
  padding: 1.875rem 0 5rem;
}
.index-container .fl_5 .left {
  overflow: hidden;
  width: 50%;
  padding-right: 1.875rem;
}
.index-container .fl_5 .left .text {
  color: #ccc;
  font-size: 1rem;
  line-height: 1.75rem;
}
.index-container .fl_5 .left .btn {
  width: 5.875rem;
  height: 1.75rem;
  font-size: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  color: #f29e1a;
  border: 2px solid #f29e1a;
  margin-top: 0.625rem;
  float: right;
}
.index-container .fl_5 .left .btn:hover {
  background-color: #f29e1a;
  color: #fff;
}
.index-container .fl_5 .right {
  width: 50%;
}
.index-container .fl_6{
  padding: 1rem 0;
}
</style>
